import React from 'react'
import { Row, Col, Card, Tag } from 'antd'
import { BankOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons'

const GovernmentService: React.FC = () => {
  const services = [
    {
      title: '政策信息发布',
      description: '最新农业政策、补贴政策等信息发布',
      status: 'active',
      icon: <FileTextOutlined />
    },
    {
      title: '办事指南',
      description: '各类政务事项办理流程指南',
      status: 'active',
      icon: <FileTextOutlined />
    },
    {
      title: '在线申报',
      description: '农业补贴、项目申报等在线办理',
      status: 'developing',
      icon: <CheckCircleOutlined />
    }
  ]

  return (
    <div>
      <div className="page-title">
        <BankOutlined />
        政务便民服务
      </div>

      <Row gutter={[16, 16]}>
        {services.map((service, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card 
              className="custom-card"
              actions={[
                <a key="view">查看详情</a>,
                <a key="apply">立即办理</a>
              ]}
            >
              <Card.Meta
                avatar={service.icon}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {service.title}
                    <Tag color={service.status === 'active' ? 'success' : 'processing'}>
                      {service.status === 'active' ? '已上线' : '开发中'}
                    </Tag>
                  </div>
                }
                description={service.description}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default GovernmentService